<script setup>
import { useDoubanStore } from "~/stores/douban";
import { badWords } from "~/utils/sensitiveWords";
import { ref } from 'vue';
import jsonData from '~/assets/vod/top250.json';
import Hls from 'hls.js'

const { locale, locales, setLocale } = useI18n()

const activeName = ref('20')
const top250Data = ref(jsonData)

definePageMeta({
  layout: 'custom',
})
const doubanStore = useDoubanStore()
const searchKeyword = ref('')
const router = useRouter()
const doubanCache = useCookie('doubanCache', {
  maxAge: 60 * 60 * 24
})

const search = (keyword) => {
  if (badWords.includes(keyword)) {
    return alert('请勿输入敏感词')
  }
  router.push({ path: '/search', query: { keyword: keyword } })
}
const donate = () => {
  router.push({ path: '/donate' })
}
const hotKeywords = ref(['庆余年', '歌手2024', '我的阿勒泰', '新生', '周处除三害', '热辣滚烫', '第二十条', '承欢记', '哈哈哈哈哈'])

const doubanData = ref([])

watch(doubanData, (newValue, oldValue) => {
  doubanData.value = newValue
})

const colorMode = useColorMode()

const handleClick = (tab, event) => {
  console.log(tab, event)
}


const goDouban = (movie) => {
  // window.open(movie.url, '_blank')
  router.push({ path: '/search', query: { keyword: movie.title } })
}

const videoRef = ref(null);
const startPlay = () => {
  const hls = new Hls();
  // hls.loadSource('http://[2001:250:5800:1005::155]:80/liverespath/449d51febadb152094085d373b9af94a6ac5f1dd/index.m3u8');
  // hls.loadSource('http://148.135.93.213:81/live.php?id=江苏卫视');
  // hls.loadSource('https://raw.githubusercontent.com/Kimentanm/aptv/master/m3u/iptv.m3u');
  // hls.loadSource('http://[2409:8087:5e00:24::1e]:6060/200000001898/460000089800010054/index.m3u8');
  hls.attachMedia(videoRef.value);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    // videoRef.value.play();
  })
}

const go2TV = () => {
  router.push({ path: '/tv' })
}

const go2AllPanSearch = () => {
  router.push({
    path: '/allpan-search',
  });
}

const changeLanguage = (val) => {
  setLocale(val);
}


onMounted(async () => {
  if (doubanCache.value === 'exist') {
    doubanData.value = doubanStore.doubanData
  } else {
    await doubanStore.getDoubanData()
    doubanData.value = doubanStore.doubanData
    doubanCache.value = 'exist'
  }

  startPlay();

  // await doubanStore.getTop250()
  await doubanStore.getDoubanDataSciFi()
  await doubanStore.getAnimation()
  await doubanStore.getComedy()
  await doubanStore.getDocumentary()
  await doubanStore.getHistory()
  await doubanStore.getLove()
  await doubanStore.getWar()
  await doubanStore.getTerrified()


})
</script>

<template>
  <div class="bg-[#ffffff] dark:bg-gray-800  min-h-screen pt-6 pb-[60px]">

    <div class="max-w-[1240px] mx-auto flex flex-row items-center justify-between px-[20px]">
      <client-only>
        <div class="flex flex-row items-center gap-2 cursor-pointer">
          <div class="flex flex-row items-center gap-2 cursor-pointer mr-6" @click="go2TV">
            <img class="w-[20px] h-[20px]" src="@/assets/CilTv.png" alt="">
            <span class="text-sm text-slate-600 font-bold dark:text-white">{{ $t('tv live') }}</span>
          </div>

          <div class="flex flex-row items-center gap-2 cursor-pointer" @click="go2AllPanSearch">
            <img class="w-[20px] h-[20px]" src="@/assets/SimpleIconsTrendmicro.png" alt="">
            <span class="text-sm text-slate-600 font-bold dark:text-white">{{ $t('all netdisk search') }}</span>
          </div>
        </div>

        <div class="flex flex-row items-center gap-2">
          <el-button v-if="colorMode.preference === 'dark'" link @click="colorMode.preference = 'light'">
            <img class="w-[20px] h-[20px]" src="@/assets/theme/LsDark.svg" alt="">
          </el-button>
          <!-- <el-button v-if="colorMode.preference === 'light'" link @click="colorMode.preference = 'dark'">
            <img class="w-[20px] h-[20px]" src="@/assets/theme/icon-park-solid--dark-mode.svg" alt="">
          </el-button> -->
          <el-button v-if="colorMode.preference === 'light'" link @click="colorMode.preference = 'dark'">
            <img class="w-[20px] h-[20px]" src="@/assets/theme/MaterialSymbolsDarkMode.svg" alt="">
          </el-button>

          <nuxt-link class="text-sm text-slate-600 font-bold dark:text-white" href="/music" title="音乐搜索小助手">
            <img v-if="colorMode.preference === 'light'" class="w-[20px] h-[20px]"
              src="@/assets/theme/IconParkOutlineMusic.svg" alt="">
            <img v-if="colorMode.preference === 'dark'" class="w-[20px] h-[20px]"
              src="@/assets/theme/IconParkOutlineMusic.svg" alt="">
          </nuxt-link>

          <el-dropdown>
            <el-button plain>
              <img class="w-[20px] h-[20px]" src="@/assets/OouiLanguage.svg" alt="">
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="changeLanguage('en')">English</el-dropdown-item>
                <el-dropdown-item @click="changeLanguage('cn')">中文</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </client-only>
    </div>
    <div class="flex flex-col items-center px-6 justify-center gap-3 mt-[10px]">
      <!-- <img class="w-[40px] h-[40px] sm:w-[60px] sm:h-[60px]" src="@/assets/my-logo3.png" alt="logo"> -->
      <h1 class="text-[22px] sm:text-[28px] font-bold dark:text-white">{{ $t('siteTitle') }}</h1>
      <div class="text-[18px] sm:text-[24px] font-bold dark:text-white text-center">{{ $t("subSiteTitle") }}</div>
    </div>
    <div class=" max-w-[1240px] mx-auto mt-[20px]">
      <div class="w-[80%] md:w-[700px] mx-auto">
        <client-only>
          <div class="flex items-center flex-col xs:flex-col md:flex-row">
            <el-input class="" v-model="searchKeyword" :placeholder="$t('search placeholder')" style="width: 100%;"
              @keydown.enter="search(searchKeyword)" prefix-icon="Search" input-style="height: 40px;border-radius: 50px"
              clearable>
            </el-input>
            <div class="w-2 h-2"></div>
            <el-button @click="search(searchKeyword)" type="primary" style="height:42px;width:120px">{{ $t('search')
              }}</el-button>
          </div>

        </client-only>
      </div>
    </div>
    <div class="mx-5 xl:max-w-[1200px] xl:mx-auto mt-[20px]">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="$t('douban top 250')" name="20">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in top250Data" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ locale === 'en' ? movie.titleEn : movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('hot movies')" name="1">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanData" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('scifi')" name="2">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanDataSciFi" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('love')" name="3">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanLove" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('terrify')" name="4">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanDataTerrified" :key="index" type="info"
              @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('animation')" name="5">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanAnimation" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('comedy')" name="6">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanComedy" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('documentary')" name="7">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanDocumentary" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('history')" name="8">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanHistory" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('war')" name="9">
          <div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8  gap-3  mt-[10px]">
            <div
              class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2"
              v-for="(movie, index) in doubanStore.doubanWar" :key="index" type="info" @click="goDouban(movie)">
              <img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
                :src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
              <p class="mt-1 text-center truncate">
                {{ movie.title }}
              </p>
              <p class="text-center text-[10px] text-[#ff08ff]">{{ $t("rate") }}：{{ movie.rate }}</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <h1 class="text-[12px] sm:text-sm text-slate-600 font-bold dark:text-white mt-[20px]"></h1> -->

    </div>

    <div class="p-4">
      <div class="flex flex-row items-center justify-center  gap-3 my-3">
        <!-- <a class="" href="https://github.com/unilei/aipan-netdisk-search">
          <img class="w-[30px] h-[30px]" src="@/assets/skill-icons--github-dark.svg" alt="github">
        </a> -->
        <el-button link color="#ffffff" @click="donate()">
          <img class="w-[30px] h-[30px]" src="@/assets/donation/dashang.svg" alt="打赏">
        </el-button>
      </div>
      <p class="text-center px-10 text-[8px] sm:text-[14px] text-slate-400">
        {{ $t("disclaimer") }}
        <a class="text-blue-500 underline" href="mailto:mpcexiao@gmail.com" title="点击留言"> {{ $t("leave a message") }}
        </a>
      </p>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-input__wrapper.is-focus) {
  /* --el-input-focus-border-color: #6648ff; */
  --el-input-focus-border-color: #ff08ff;
  ;
}

:deep(.el-tabs__item.is-active) {
  color: #ff08ff;
}

:deep(.el-tabs__item:hover) {
  color: #ff08ff;
}

:deep(.el-tabs__active-bar) {
  background-color: #ff08ff;
}
</style>